<template>
  <div>
    <Header></Header>
    <!--main开始-->
    <div class="mainBox w1200 bc mt20 clearfix">
      <userSideMenu :flag="'circle'"></userSideMenu>
      <div class="mainRight fr w930">
        <!--收藏的游记-->
        <div class="br2 bg100 pb60">
          <!--title-->
          <h1 class="h60 bb90  c60 clearfix ">
            <a :class="(tagIndex === 0)?'ml25 fl h60 f18 fm-yahei  lh60  c60  hoverborder_grn_bottom curborder_grn_bottom':'ml25 fl h60 f18 fm-yahei  lh60  c60  hoverborder_grn_bottom'" href="javascript:void(0);" @click="getMyCreateCircle">我创建的圈子</a>
            <a :class="(tagIndex === 1)?'fl h60 f18 fm-yahei c60 lh60  ml80  hoverborder_grn_bottom curborder_grn_bottom':'fl h60 f18 fm-yahei c60 lh60  ml80  hoverborder_grn_bottom'" href="javascript:void(0);" @click="getMyJoinCircle">我加入的圈子</a>
          </h1>
          <!--list-->
          <ul class="w880 pl25 pr25  c60 f12 lh18 fm-yahei  pointer">
            <CircleItem v-for = "(circle, index) in circleList" :circle="circle"></CircleItem>
            <li class="tc c60 f12 lh60 mt5">
              <a class="c60 hoverfont_unl" href="javascript:void(0);" @click = "getMoreCircle" ref="infoListBox">点击查看更多></a>
            </li>
          </ul>
        </div><!--热门活动结束-->

      </div><!--mainRight结束-->
    </div>
    <Footer></Footer>
    <loading v-show="loadState"></loading>
  </div>
  <!--main结束-->
</template>

<script>
  import Header from "../../components/header";
  import Footer from "../../components/footer";
  import userSideMenu from "../../components/usersidemenu";
  import CircleItem from "../../components/circleItem";
  import Utils from "../../assets/Util";
  import loading from "../../components/loading";
  export default {
    name: "userCircle",
    components: {
      Header,
      Footer,
      userSideMenu,
      CircleItem,
      loading
    },
    data(){
      return {
        loadState:true,
        circleList:[],
        tagIndex:0,
        getCircleData:{
          "type": 3,
          "categoryID": 0,
          "cityID": 0,
          "userID": localStorage.getItem("uId"),
          "pageSize": 5,
          "pageIndex": 0,
          "typeID": "",
          "provinceID": ""
        }
      }
    },
    mounted(){
      if (!Utils.isLogin){
        this.$router.push({path:'/'})
      }
      this.getMyCircle();
    },
    methods:{
      // 请求我的圈子
      getMyCircle(){
        let props = {
          url:"/Group/GetList",
          data:this.getCircleData,
          sCallBack:res => {
            this.loadState = false;
            if(res.data.code === 1){
              if(res.data.data.length === 0){
                if (this.getCircleData.pageIndex === 0){
                  this.$refs.infoListBox.innerText = "暂无数据"
                  return false;
                }
                this.$message.success("全部加载完毕");
                return false;
              }else {
                this.$refs.infoListBox.innerText = "点击加载更多"
              }
              this.circleList = this.circleList.concat(res.data.data);
            }else{
              this.$message.error("请求我的圈子出错");
            }
          },
          eCallBack:err => {
            this.$message.error("请求我的圈子失败");
            console.log(err);
          }
        }
        Utils.myRequest(props);
      },
      // 请求更多我的圈子
      getMoreCircle(){
        this.loadState = true;
        this.getCircleData.pageIndex += 1;
        this.getMyCircle();
      },
      // 请求我创建的圈子
      getMyCreateCircle(){
        this.loadState = true;
        this.circleList = [];
        this.tagIndex = 0;
        this.getCircleData.type = 3;
        this.getCircleData.pageIndex = 0;
        this.getMyCircle();
      },
      // 请求我加入的圈子
      getMyJoinCircle(){
        this.loadState = true;
        this.circleList = [];
        this.tagIndex = 1;
        this.getCircleData.type = 4;
        this.getCircleData.pageIndex = 0;
        this.getMyCircle();
      }
    }
  }
</script>

<style scoped>

</style>
